<template>
  <div class="main_box">
    <div class="main_box_son">
      <div class="main_conent">
        <div class="title">报表审核管理</div>
        <div class="divheight10"/>
        <div class="botborder">
          <div class="despan">
            <p>数据日期<span>20190114</span></p>
          </div>
          <div class="despan">
            <p>数据日期<span>20190114</span></p>
          </div>
          <div class="despan">
            <p>数据日期<span>20190114</span></p>
          </div>
          <div class="despan">
            <p>数据日期<span>20190114</span></p>
          </div>
          <div class="despan">
            <p>数据日期<span>20190114</span></p>
          </div>
          <div class="despan">
            <p>数据日期<span>20190114</span></p>
          </div>
        </div>
        <el-table
          :data="MonitorOldTableData"
          :border="true"
          class="tb-edit"
          style="width: 100%"
          @cell-click="cellclick"
          @selection-change="MultipleSelectionValue">
          <el-table-column
            fixed
            type="index"
            width="50"
            label="序号"
            align="center"
          />
          <el-table-column
            v-for="(item,index) in tableHead"
            :label="item.label"
            :property="item.property"
            :key="index"
            align="center"
          >
            <template slot-scope="scope" select="selecttest">
              <template v-if="!MonitorOldTableData[scope.$index].flag">
                <el-input v-model="MonitorDataToArr[scope.$index][index]" style="display:block" size="small"/>
                <!-- <el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">cancel</el-button> -->
              </template>
              <span v-else>{{ MonitorDataToArr[scope.$index][index] }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="Actions" width="120">
            <template slot-scope="scope">
              <el-button v-if="!MonitorOldTableData[scope.$index].flag" type="success" size="small" icon="el-icon-circle-check-outline" @click="confirmEdit(MonitorDataToArr,scope.$index)">Ok</el-button>
              <el-button v-else type="primary" size="small" icon="el-icon-edit" @click="MonitorOldTableData[scope.$index].flag=!MonitorOldTableData[scope.$index].flag">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
</div></template>

<script>
export default {
  data() {
    return {
      percentageVal: 100,
      currentPage: 0,
      showText: false,
      options: [{
        value: '待审核',
        label: '待审核'
      }, {
        value: '已通过',
        label: '已通过',
        disabled: true
      }],
      options2: [{
        value: '证券公司',
        label: '证券公司'
      }, {
        value: '金融公司',
        label: '金融公司',
        disabled: true
      }],
      value2: '',
      search: '',
      search1: '',
      search2: '',
      search3: '',
      search4: '',
      search5: '',
      tableHead: [
        {
          prop: 'name',
          label: '报表名称',
          align: 'left',
          width: 15
        },
        {
          prop: 'address',
          label: '报表编号',
          align: 'left',
          type: 'hl',
          width: 30
        },
        {
          prop: 'description',
          label: '状态',
          align: 'left',
          width: 50
        },
        {
          prop: 'date',
          label: '产品品种',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '报表生成时间',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '经办人',
          align: 'left',
          width: 10
        },
        {
          prop: 'date',
          label: '报送频次',
          align: 'left',
          width: 10
        }
      ],
      oldTableData: [],
      tableData: [],
      // 数据值
      dataToArr: [
        {
          name: '余额息表',
          number: 'A1001',
          state: '待审核',
          type: '证券公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日',
          flag: true
        },
        {
          name: '余额息表',
          number: 'A1002',
          state: '待审核',
          type: '证券公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日',
          flag: true
        },
        {
          name: '余额息表',
          number: 'A1003',
          state: '待审核',
          type: '证券公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日',
          flag: true
        },
        {
          name: '余额息表',
          number: 'A1004',
          state: '已通过',
          type: '证券公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日',
          flag: true
        },
        {
          name: '余额息表',
          number: 'A1005',
          state: '已通过',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日',
          flag: true
        },
        {
          name: '余额息表',
          number: 'A1008',
          state: '已通过',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日',
          flag: true
        },
        {
          name: '余额息表',
          number: 'A1009',
          state: '已通过',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日',
          flag: true
        },
        {
          name: '余额息表',
          number: 'A1008',
          state: '已驳回',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日',
          flag: true
        },
        {
          name: '余额息表',
          number: 'A1009',
          state: '已通过',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日',
          flag: true
        },
        {
          name: '息表',
          number: 'A10010',
          state: '待审核',
          type: '金融公司',
          date: '2016-05-04',
          operator: '王小虎222',
          rate: '日',
          flag: true
        }
      ],
      flag: true
    }
  },
  computed: {
    MonitorOldTableData: function() {
      return this.oldTableData
    },
    MonitorDataToArr: function() {
      return this.dataToArr
    }
  },
  mounted() {
    this.tableData = this.dataToArr
    this.oldTableData = this.dataToArr
    const tableList = this.tableData
    const arr = []
    for (var i = 0; i < tableList.length; i++) {
      arr[i] = []
    }
    for (const i in tableList) {
      for (const b in tableList[i]) {
        arr[i].push(tableList[i][b])
      }
    }
    this.dataToArr = arr
  },
  methods: {
    confirmEdit(e, index) {
      this.MonitorOldTableData[index].flag = !this.MonitorOldTableData[index].flag
    },
    handleEdit(row) {
      console.log(row)
      // row.edit = false
      // row.originalTitle = row.title
      // this.$message({
      //   message: 'The title has been edited',
      //   type: 'success'
      // })
    },
    cellclick(row, column, cell, event) {
      // console.log(row) // 当前行数据
      // console.log(column)
      // console.log(cell) // 当前target
      // console.log(event)
    },
    // 多选的值
    MultipleSelectionValue(e) {
    },
    serchChange(e) {
      this.search = e
    },
    storage() {
      this.dataToArr = this.oldTableData
      console.log(this.dataToArr)
      this.search = ''
      this.search1 = ''
      this.flag = true
      this.search2 = null
      this.search3 = null
      this.search4 = null
      this.search5 = null
    }
  }
}
</script>

<style rel="stylesheet/stylus" lang="stylus" scope>
@import '~@/assets/common';
.botborder {
  border-bottom: $borderbottom
  margin-bottom 20px
}
.despan {
  display inline-block
  width 33%
  font-size: 0
  text-indent 2em
  padding 0
  margin 0
  p {
    font-size 16px
    padding 20px 0
  }
}
</style>
